<!-- 我的个人信息 -->
<template>
  <div id="MyInformation">
    <!-- 头部 -->
    <Head BackType1="1" title="个人信息"></Head>
    <div id="MyInformationBox">
      <div class="MyBox BoxActive" @click="gotoMyHead()">
        <div class="MyBoxList">
          <div class="MyBoxTitle">头像</div>
          <div class="MyBoxMain">
            <img  class="MyBoxMainOneSrc" :src="HeadPortrait" alt="">
            <img class="More" src="@/assets/img/ArrowRight.png" alt="">
          </div>
        </div>
      </div>
      <div class="MyBox BoxActive" v-for="(item,index) in items" :key="index" @click="GotoDetails(index)">
        <div class="MyBoxList">
          <div class="MyBoxTitle">{{item.Title}}</div>
          <div class="MyBoxMain">
            <div class="MyBoxText">{{item.Text}}</div>
            <img class="More" src="@/assets/img/ArrowRight.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head"
import { Toast } from 'vant';
export default {
    data(){
      return{
        HeadPortrait:require('@/assets/img/NoPic.png'),
        items:[
          {Title:'昵称',Text:''},
          {Title:'我的相册',Text:''},
          {Title:'性别',Text:''},
          {Title:'邮箱',Text:''},
          {Title:'平台账号',Text:'',num:''}
        ]
      }
    },
    components:{
      Head,
      [Toast.name]:Toast,
    },
    mounted(){
      var that = this;
      /**
      * 获取个人信息
      * sex:性别 1男 2女 3保密
      */
      this.$get(urlConfig.memberInfo)
      .then(res => {
        if(res.data ==''){
          
        }else{
          // 头像
          if(res.data.pic == urlConfig.BaseUrl){
            that.HeadPortrait = require('@/assets/img/NoPic.png');
          }else{
            that.HeadPortrait = res.data.pic;
          }
          // 昵称
          if(res.data.nickname == ''){
            that.items[0].Text = '未设置'
          }else{
            that.items[0].Text = res.data.nickname
          }
          // 我的相册
          if(res.data.myPhoto.length == 0){
            that.items[1].Text = '未添加'
          }else{
            that.items[1].Text = '点击查看'
          }
          // 性别
          switch (parseInt(res.data.sex)){
            case 1:
              that.items[2].Text = '男'
              break;
            case 2:
              that.items[2].Text = '女'
              break;
            case 3:
              that.items[2].Text = '保密'
              break;
          }
          // 邮箱
          if(res.data.email == ''){
            that.items[3].Text = '未设置'
          }else{
            that.items[3].Text = res.data.email
          }
          //平台账号
          that.items[4].Text = res.data.platformId
          //平台账号有没有被修改：0可修改一次，1不可修改
          that.items[4].num = res.data.accountUpdateTime
        }
      })

      let hasAmend = this.$route.params.hasAmend;
      let name = this.$route.params.name;
      if(hasAmend ==undefined){

      }else{
        Toast.success(name+'修改成功');

      }
    },
    methods:{
      GotoDetails(index){
        Toast.clear()
        if(index == 0){
          console.log(11)
          this.$router.push({path:'/Nickname',query:{name:this.items[0].Text}})
        }else if(index == 1){
          this.$router.push('/MyPhoto')
        }else if(index == 2){
          this.$router.push({path:'/Gender',query:{name:this.items[2].Text}})
        }else if(index == 3){
          this.$router.push({path:'/Email',query:{name:this.items[3].Text}})
        }else{
          this.$router.push({path:'/PlatId',query:{name:this.items[4].Text,num:this.items[4].num}}) 
        }
      },
      gotoMyHead(){
        console.log(5)
        this.$router.push({name:'MyHead',params:
          {
            src: 'a',
          }})
      },
    }
}
</script>

<style scoped lang="less">
  #MyInformation{
    font-size: 34px;
    #MyInformationBox{
      margin-top: 10px;
      background: #fff;
      width: 750px;
      position: fixed;
      top: 88px;
      overflow: scroll;
      .MyBox{
        padding-left:30px;
        color: #323232;
        .MyBoxList{
          width: 720px;
          display: flex;
          padding: 16px 0;
          border-bottom: 1px solid #e5e5e5;
          flex-direction: row;
          justify-content: space-between;
          min-height: 78px;
          align-items: center;
          .MyBoxMain{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-right: 30px;
            .MyBoxMainOneSrc{
              height: 130px;
              width: 130px;
              border-radius: 65px;
            }
            .More{
              width: 16px;
              height: 25px;
              padding-left: 20px;
            }
            .MyBoxText{
              color: #888888;
            }
          }
        }
        
        &:last-child{
        border-bottom: 0;
        }
        
      }
    }
  }
</style>
